<template>
  <div class="map-container">
    <div id="map"></div>
    <div class="btn-wrap">
      <button @click="switchMap('vec')">电子地图</button>
      <button @click="switchMap('img')">影像地图</button> <br />

      <button @click="loadGeojson">加载10w geojson</button>
      <button @click="clearGeojson">清空geojson</button> <br />
      <button @click="loadGeojson_30w">加载30w geojson</button>
      <button @click="clearGeojson_30w">清空30w geojson</button> <br />
      <button @click="loadSuzhou">加载苏州行政区划</button>
      <button @click="clearSuzhou">清空苏州行政区划</button> <br />
      <button @click="measures('xian')">测距</button>
      <button @click="measures('mian')">测面</button>
    </div>
  </div>
</template>

<script setup>
// 引入mapbox
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import MapboxDraw from '@mapbox/mapbox-gl-draw'
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'

import { onMounted } from 'vue'
import { MeasureTool } from '@/utils/measure'
import { TiandituLayer } from '@/utils/tianditu'

let map = null,
  Draw = null,
  measureTool = null,
  tiandituLayer = null

const initMap = () => {
  mapboxgl.accessToken = 'pk.eyJ1IjoiYmVpem91byIsImEiOiJjbGZoeDhycW8waGsxM3FvaHh5cTVwdml5In0.ewZaVrl96N9xk0jFKlu85A'
  
  // 初始化天地图工具
  tiandituLayer = new TiandituLayer()
  
  map = new mapboxgl.Map({
    container: 'map',
    style: {
      version: 8,
      sources: {},
      layers: []
    },
    center: [120.476858, 31.358201],
    zoom: 13,
    maxZoom: 17,
    minZoom: 6
  })

  map.on('load', () => {
    // 默认使用电子地图
    tiandituLayer.switchMapStyle(map, 'vec')
    
    // 初始化绘制工具
    Draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        point: true,
        line_string: true,
        polygon: true,
        trash: true,
      },
    })
    map.addControl(Draw, 'top-left')

    // 初始化测量工具
    measureTool = new MeasureTool(map, Draw)
  })
}

// 切换电子地图和影像地图
const switchMap = (type) => {
  tiandituLayer.switchMapStyle(map, type)
}

// 绘制线、面的功能
const measures = (type) => {
  measureTool.startMeasure(type)
}

// geojson加载点
const loadGeojson = () => {
  fetch(`${import.meta.env.VITE_JSON_BASE_URL}/json/geojson_data.json`)
    .then((response) => response.json())
    .then((data) => {
      // console.log(data)
      if (!map.getSource('geojson')) {
        map.addSource('geojson', {
          type: 'geojson',
          data: data,
        })
      }

      map.addLayer({
        id: 'geojson',
        type: 'circle',
        source: 'geojson',
        paint: {
          'circle-color': '#007cbf',
          'circle-radius': 4,
          'circle-stroke-width': 1,
          'circle-stroke-color': '#fff',
        },
      })
    })
}

// 清空地图点
const clearGeojson = () => {
  map.removeLayer('geojson')
}

// 加载30w geojson
const loadGeojson_30w = () => {
  fetch(`${import.meta.env.VITE_JSON_BASE_URL}/json/geojson_data_30w.json`)
    .then((response) => response.json())
    .then((data) => {
      // console.log(data)
      if (!map.getSource('geojson_30w')) {
        map.addSource('geojson_30w', {
          type: 'geojson',
          data: data,
        })
      }

      map.addLayer({
        id: 'geojson_30w',
        type: 'circle',
        source: 'geojson_30w',
        paint: {
          'circle-color': '#007cbf',
          'circle-radius': 4,
          'circle-stroke-width': 1,
          'circle-stroke-color': '#fff',
        },
      })
    })
}

// 清空30w geojson
const clearGeojson_30w = () => {
  map.removeLayer('geojson_30w')
}

// 加载苏州行政区划
const loadSuzhou = () => {
  fetch(`${import.meta.env.VITE_JSON_BASE_URL}/json/suzhou_xzqh.json`)
    .then((response) => response.json())
    .then((data) => {
      // 添加线
      map.addSource('szs-lunkuo', {
        type: 'geojson',
        data: data,
      })
      map.addLayer({
        id: 'szs-lunkuo',
        type: 'line',
        source: 'szs-lunkuo',
        paint: {
          'line-color': '#0fe0e7',
          'line-width': 5,
        },
      })
    })
}
// 清空苏州行政区划
const clearSuzhou = () => {
  map.removeLayer('szs-lunkuo')
  map.removeSource('szs-lunkuo')
}

onMounted(() => {
  initMap()
})
</script>

<style scoped lang="less">
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  #map {
    width: 100%;
    height: 100%;
  }
  .btn-wrap {
    position: absolute;
    top: 10px;
    right: 50px;
  }
  .btn-wrap button {
    padding: 3px 6px;
    background-color: #007cbf;
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
